<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>

        #app{
            overflow: hidden;
        }

        .demo-ruleForm{
            width: 400px;
            margin: 650px auto;
            padding-right: 50px;

        }
        .el-header, .el-footer {

            background-color: #B3C0D1;
            background-size: cover;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }
        body{
            background-image: url("JPG/greens/b--1.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .el-main {
            width: 600px;
            height: 600px;
            background-color: rgba(255,255,255,0.9);
            border-radius: 3px;
            margin: 0 auto;
            margin-top: 60px;
            text-align: center;
            color: #282c30;
            line-height: 160px;
            
            overflow: hidden;

        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<div id="app" >
<div>
    <img src="" alt="">
</div>


        <el-main >
         <h1 style="margin-top: -50px;color: #0096dc">会员注册</h1>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 0px;margin-bottom: 0px">
                <el-form-item label="用户名 :" prop="name" >
                    <el-input v-model="ruleForm.name" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 0px;margin-bottom: 0px">
                <el-form-item label="请输入密码 :" prop="password" >
                    <el-input v-model="ruleForm.password" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 0px;margin-bottom: 0px">
                <el-form-item label="请确认密码 :" prop="password_1" >
                    <el-input v-model="ruleForm.password_1" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
            </el-form>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 0px;margin-bottom: 0px">
                <el-form-item label="设置邮箱 :" prop="email" >
                    <el-input v-model="ruleForm.email" style="width: 300px"></el-input>
                </el-form-item>
            </el-form>
            </el-form>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="margin-top: 0px;margin-bottom: 0px">
                <el-form-item label="设置手机号 :" prop="mobile" >
                    <el-input v-model="ruleForm.mobile" style="width: 300px" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
            </el-form>

            <div style="margin-left:10px ">
            <a href="">
                <el-button  type="primary" style="background-color: #0096dc">注册</el-button>
            </a>
            <a href="登录.html">
                <el-button  type="primary" style="background-color: #0096dc;margin-left: 20px">登录</el-button>
            </a>
            </div>

        </el-main>



</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                ruleForm: {
                    name: '',
                    password: '',
                    password_1: '',
                    email: '',
                    mobile: '',



                },
                rules: {
                    name: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur'}
                    ],
                    password_1: [
                        {required: true, message: '确认密码', trigger: 'blur'},
                        {min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '设置邮箱', trigger: 'blur'},

                    ],
                    mobile: [
                        {required: true, message: '设置手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '长度在 11 位数字', trigger: 'blur'}
                    ],
                }

            }

        },
        methods: {

        }
    })
</script>
</html>